<template>
  <div style="background-color: #f8f8f8; min-height: 100vh">
    <!--头部-->
    <!--主体-->
    <div class="main-body">
      <router-view ref="child" @update:user="updateUser" />
    </div>

    <van-tabbar v-model="active" v-show="showtab==='true'">

      <van-tabbar-item name="home" icon="home-o" to="/front/home">首页</van-tabbar-item>
      <van-tabbar-item name="message" icon="chat-o" dot  to="/front/chat">消息</van-tabbar-item>
      <van-tabbar-item name="sell" icon="search" dot  to="/front/addGoods">卖闲置</van-tabbar-item>
      <van-tabbar-item name="car" icon="shopping-cart-o" badge="5"  to="/front/goods">购物车</van-tabbar-item>
      <van-tabbar-item name="mine" icon="friends-o" badge="20"  to="/front/person">我的</van-tabbar-item>
    </van-tabbar>
    <Footer />

  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import {getshowtab, showtab} from "@/utils/utils";

export default {
  name: "FrontLayout",
  components: {
    Footer
  },
  data () {
    return {
	    active:'home',
      notice: [],
      showtab:localStorage.getItem("showtab"),
      // showtab:showtab,
      user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
      menus: [
        { text: '热卖专区', path: '/front/home' },
        { text: '社区广场', path: '/front/posts' },
        { text: '求购专区', path: '/front/help' },
        { text: '系统公告', path: '/front/notice' },
        { text: '留言反馈', path: '/front/feedback' },
      ]
    }
  },

  mounted() {
    console.log(getshowtab());
    console.log(this.showtab);
    localStorage.setItem("showtab","true");
  },
  methods: {
    getshowtab,
    updateUser() {
      this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
    },
    // 退出登录
    logout() {
      localStorage.removeItem("xm-user");
      this.$router.push("/login");
    },
  }

}
</script>

<style scoped>
  @import "@/assets/css/front.css";

  .menu {
    color: #eee;
    font-size: 16px;
    padding: 0 20px;
    cursor: pointer;
  }
  .menu:hover {
    color: orange;
  }
  .menu-active {
    color: orange;
  }
</style>